// const { param } = require("jquery")

// const liBox = document.querySelector('.li')
// const libox = document.querySelector('.li > li')
// const maiBox = document.querySelector('.mai')
// xuanran()
// async function xuanran () {
//     const script = document.createElement('script')
//     script.src = 'https://search.mall.360.cn/search/q?q=*&callback=handler&_=1639548614549'
//     document.body.appendChild(script)
//     // script.remove()
// }
// function handler (res) {
//     // console.log(res)
//     // console.log(res.data.list)
//     let str = ''
//     res.data.list.forEach(item => {
//         // console.log(item.price / 100)
//         // console.log(item.itemId)
//         str += `
//         <li data-id="${  item.itemId}">
//                     <img src="${ item.img }" alt="">
//                     <div class="lan">${ item.title }</div>
//                     <div class="pri">￥ ${ item.price / 100  }</div>
//                     <button class="mai">加入购物车</button>
//                 </li>
//         `
//     })
//     liBox.innerHTML = str
// }
// liBox.addEventListener('click', e => {
//     if (e.target.nodeName === 'LI') {
//       const goodsId = e.target.dataset.id
//       window.sessionStorage.setItem('goodsId', goodsId)
//       window.location.href = '../htnl/detail.html'
//     }
  
//     // 4-2. 判断点击的是 加入购物车 按钮, 加入购物车操作
//     // if (e.target.nodeName === 'BUTTON') {
//       // 拿到当前商品的商品 id
//     //   const goodsId = e.target.dataset.id
//       // 执行加入购物车的操作
//     //   addCart(goodsId)
//     // }
//   })











// const searchInp = document.querySelector('.right > .xia > span > input')
//   search()
//   function search () {
//     const script = document.createElement('script')
//     script.src = 'https://search.mall.360.cn/search/q?q=sousuo&callback=handler&_=1639620056888'
//     document.body.appendChild(script)
//     script.remove()
//   }
//   function handler (res) {
//     console.log(res)
//     searchInp.addEventListener('input', () => {
//       res.queryString = suosou
//       sousuo = searchInp.value.trim()
//     })
//     // xuanran()
//   }








/* 渲染 */
const cateBox = document.querySelector('.cate')
const propsBox = document.querySelector('.props')
const pageBox = document.querySelector('.pagination')
const box = document.querySelector('.container')
const goodsBox = document.querySelector('.zhaopian > .li')
const params = {
  q: '*',
  cate: '',
  props: '',
  sort: '',
  page: 0,
  callback: 'fn'
}
function queryStringify(obj) {
  let str = ''

  for (let k in obj) {
    str += k + '=' + obj[k] + '&'
  }

  return str.slice(0, -1)
}
getList()
function getList () {
  const script = document.createElement('script')
  // script.src = `https://search.mall.360.cn/search/q?${ queryStringify(params) }`
  script.src = `https://search.mall.360.cn/search/q?${ queryStringify(params) }`
  // console.log(script.src)
  document.body.appendChild(script)
  script.remove()
}
function fn (res) {
  // console.log(res)
  const cateList = res.data.cates.subs
  // console.log(cateList)
  bindCateList(cateList)
  res.data.options[0] && bindPropsList(res.data.options[0].subs)
  bindPagenation(res.total)
  bindGoodsList(res.data.list)
  
}
function bindCateList (list) {
  let str = ''
  list.forEach(item => {
    str += `
    <li class= "cate_item" data-value="${ item.value }">${ item.text }</li>
    `
  })
  cateBox.innerHTML = str
}
function bindPropsList (list) {
  // console.log(list)
  let str = ''
  list.forEach(item => {
      str +=`
      <li class="props_item" data-value="${ item.value }">${ item.text }</li>
      `
  })
  propsBox.innerHTML = str
}
function bindPagenation (total) {
  const num = Math.ceil(total / 20)
  let str = `
  <span class="prevBtn">上一页</span>
  `
  for (let i = 0; i < num; i++) {
    str += `
    <li class="page_item" data-value="${ i }">${ i + 1 }</li>
    `
  }
  str +=` 
  <span class="nextBtn">下一页</span>
  `
  pageBox.innerHTML = str
}



function bindGoodsList(list) {
  // console.log(list)
  let str = ''

  list.forEach(item => {
    // console.log(item)
    str += `
    <li data-id="${ item.itemId }">
    <img src="${item.img}" alt="">
          <div class="lan">${ item.title }</div>
          <div class="pri">￥ ${ (item.price / 100).toFixed(2) }</div>
          <button class="mai">加入购物车</button>
      </li>
    `
  })

  goodsBox.innerHTML = str
}


box.addEventListener('click', e => {
  const t = e.target
    // console.log('切换分类')
    if (t.className === 'cate_item') {
      params.cate = t.dataset.value
      params.page = 0
      getList()
    }
  if (t.className === 'props_item') {
    // console.log('点击')
    params.props = t.dataset.value
    params.page = 0
    getList()
    // console.log(params.props)
  }
  if (t.className === 'sort_item') {
    params.sort = t.dataset.value
    getList()
  }
  if (t.nodeName === 'BUTTON') {
    // 拿到搜索框内的文本赋值给 cate
    params.q = t.previousElementSibling.value.trim()
    params.page = 0
    getList()
  }
  if (t.className === 'page_item') {
    params.page = t.dataset.value
    getList()
  }
})

const liBox = document.querySelector('.li')
liBox.addEventListener('click', e => {
  // console.log('点击')
      if (e.target.nodeName === 'LI') {
        const goodsId = e.target.dataset.id
        window.sessionStorage.setItem('goodsId', goodsId)
        window.location.href = '../htnl/detail.html'
      }
})